<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="基本信息">
        <card title="基本信息">
          <div class="section-item" style="margin-top: 0">
            <div class="section-item-content">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="企业名称">{{ clientDetail.clientName }}</a-descriptions-item>
                <a-descriptions-item label="电子合同认证状态">
                  <div class="status" :class="getClassName(clientDetail)">
                    {{ clientDetail.ecAuthenticationStatusName }}
                  </div>
                  <template v-if="clientDetail.ecAuthenticationStatus === 0">
                    原因: {{ clientDetail.authenticationFailedReason }}
                  </template>
                </a-descriptions-item>
                <a-descriptions-item label="签署方式">{{ clientDetail.contractSignWayName }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
        <card title="企业联系人">
          <div class="section-item" style="margin-top: 0">
            <div class="section-item-content">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="姓名">{{ clientDetail.linkman }}</a-descriptions-item>
                <a-descriptions-item label="手机号">{{ clientDetail.mobile }}</a-descriptions-item>
                <a-descriptions-item>{{ ' ' }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
        <card title="发票信息">
          <div class="section-item" style="margin-top: 0">
            <div class="section-item-content">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="抬头">{{ clientDetail.billTitle }}</a-descriptions-item>
                <a-descriptions-item label="发票类型">{{ clientDetail.billTypeName }}</a-descriptions-item>
                <a-descriptions-item label="纳税人识别号">{{ clientDetail.taxpayerId }}</a-descriptions-item>
                <a-descriptions-item label="地址">{{ clientDetail.address }}</a-descriptions-item>
                <a-descriptions-item label="电话">{{ clientDetail.billReceiverPhone }}</a-descriptions-item>
                <a-descriptions-item>{{ ' ' }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
        <card title="合同信息" :showDivider="false">
          <div class="section-item" style="margin-top: 0">
            <div class="section-item-content" v-for="(item, index) in clientDetail.contractList" :key="index">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="附件" :span="1">
                  <drag-upload v-model="item.fileId" class="upload-content" disabled />
                </a-descriptions-item>
                <a-descriptions-item label="合同有效期">{{
                  item.startTime && item.endTime ? item.startTime + '至' + item.endTime : '-'
                }}</a-descriptions-item>
                <a-descriptions-item label="签约人">{{ item.signUserName }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
      </a-tab-pane>
      <a-tab-pane key="2" title="操作记录">
        <OperateLog :id="routePrams.id" type="20" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="EpClientDetail">
  import { ref, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import { getDetail } from '@/api/market/clientInfo'

  const route = useRoute()
  const routePrams = route.params
  const clientDetail = ref({})
  const activeType = ref('1')

  const getDetails = (id) => {
    getDetail({ id: id }).then((res) => {
      nextTick(() => {
        clientDetail.value = res.result
      })
    })
  }

  if (routePrams.id) {
    getDetails(routePrams.id)
  }

  const getClassName = (item) => {
    // -1: 未认证 0: 认证失败 1: 认证成功 2: 认证中
    if (item.ecAuthenticationStatus === -1) {
      return 'status-unauth'
    } else if (item.ecAuthenticationStatus === 0) {
      return 'status-failed'
    } else if (item.ecAuthenticationStatus === 1) {
      return 'status-success'
    } else if (item.ecAuthenticationStatus === 2) {
      return 'status-wait'
    }
  }
</script>

<style lang="less" scoped>
  .section-item {
    .section-item-header {
      color: #1d2129ff;
      font-weight: 500;
    }
    .section-item-content {
      padding: 20px 20px 0 20px;

      .status {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 76px;
        height: 20px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid;
        color: rgba(185, 187, 196, 1);
        border-color: rgba(229, 230, 235, 1);
        background-color: rgba(242, 243, 245, 1);

        &.status-unauth {
          color: rgba(185, 187, 196, 1);
          border-color: rgba(229, 230, 235, 1);
          background-color: rgba(242, 243, 245, 1);
        }
        &.status-failed {
          color: rgba(245, 63, 63, 1);
          border-color: rgba(245, 63, 63, 1);
          background-color: rgba(255, 236, 232, 1);
        }
        &.status-success {
          color: rgba(0, 180, 42, 1);
          border-color: rgba(0, 180, 42, 1);
          background-color: rgba(232, 255, 234, 1);
        }
        &.status-wait {
          color: rgba(255, 125, 0, 1);
          border-color: rgba(255, 125, 0, 1);
          background-color: rgba(255, 247, 232, 1);
        }
      }
    }
    .btn {
      margin-left: 16px;
    }
    &.gray {
      background-color: rgba(var(--gray-1), 0.5) !important;
      border-radius: 0px 0px 0px 0px;
      .section-item-content {
        padding: 20px 20px 12px 20px;
      }
    }
  }
</style>
